<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基础组件</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="root">
    <button-component></button-component>
  </div>

</body>

<!-- 组件的data必须是一个函数不然会报错,
    模板中只能有一个根节点
    组件可以调用多次-->

<script type="text/javascript">
  Vue.config.productionTip = false;

  Vue.component("button-component", {
    data: function () {
      return { count: 0 }
    },
    template: '<div><h1>{{count}}</h1><button @click="count++">点击我</button></div>',
  })

  new Vue({
    el: '#root',
    data: {

    },
    methods: {}
  })
</script>

</html>